<template>
  <div>
    <div class="detail-title" :class="'line-' + line">
      {{ label }}
    </div>
    <div class="sub-title f f-ac f-js mt-10">
      <div><i class="el-icon-time" /> {{ time }}</div>
      <div v-if="share" class="share" title="点击分享复制链接" @click="handleShare">
        <i class="el-icon-share" /> 分享
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 标题
    label: {
      type: String,
      default: "-",
    },
    // 时间
    time: {
      type: String,
      default: "-",
    },
    // 显示分享
    share: {
      type: Boolean,
      default: true,
    },
    // 标题行数
    line: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    // 分享
    handleShare() {
      var input = document.createElement("input"); // 直接构建input
      input.value = location.href; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      this.$message.success("已复制");
      document.body.removeChild(input); // 删除临时实例
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-title {
  color: #193980;
  font-size: 20px;
  font-weight: 600;
}
.sub-title {
  color: #a9a9aa;
  font-size: 14px;
  > div:first-child {
    margin-right: 40px;
  }
  i {
    margin-right: 10px;
  }
  .share {
    cursor: pointer;
    &:hover {
      color: #193980;
    }
  }
}
</style>
